<script>
/**
 * 盒子
 *  */
import {
    defineComponent,
    ref,
    getCurrentInstance,
    reactive,
    toRef,
    computed,
    onMounted,
    onActivated,
    watch,
} from 'vue';

import icons1 from '@/assets/img-show2/icons/icons1.png';
export default defineComponent({
    components: {

    },
    props: {
        dataInfo: {
            type: Array,
            default: () => {
                return [

                ];
            },
        },
    },
    setup(props) {
        const EchartContainerRef = ref(); //组件实例
        const dataContainer = reactive({
            loading: false,
            list: [{ name: '装机容量', value: 0, icon: icons1, company: 'MW' },
            { name: '年总发电量', value: 0, icon: icons1, company: 'MWh' },
            { name: '当日总发电量', value: 0, icon: icons1, company: 'MWh' },
            { name: '当前总功率', value: 0, icon: icons1, company: 'MWA' },
            { name: '当前电网频率', value: 0, icon: icons1, company: 'HZ' },
            { name: '当前电压', value: 0, icon: icons1, company: 'kV' },
            { name: '当前有功功率', value: 0, icon: icons1, company: 'MW' },
            { name: '当前无功功率', value: 0, icon: icons1, company: 'MVar' },]
        });
        watch(
            [toRef(props, 'dataInfo')],
            () => {
                dataContainer.list.forEach((v,index)=>{
                    v.value = props.dataInfo[index]?.toFixed(2)
                })
            },
            {
                immediate: true,
            },
        );
        onMounted(() => {

        });
        return {
            dataContainer,

        };
    },
});
</script>

<template>
    <div class="box-cp-container">
        <div class="boxAll">
            <div class="listItem" v-for="(item, index) in dataContainer.list">
                <div>
                    <img :src="item.icon" alt="">
                    <span> {{ item.name }}</span>
                </div>
                <p class="numbes">
                    {{ item.value }}
                    <span>{{ item.company }}</span>
                </p>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.box-cp-container {
    width: 100%;
    height: 100%;

    .boxAll {
        display: flex;
        padding: 1.250rem;
        flex-wrap: wrap;

        .listItem {
            flex-basis: 32%;
            background-color: #021f40;
            text-align: center;
            color: #fff;
            margin-right: 2%;
            margin-bottom: 0.625rem;
            padding: 0.225rem 0.000rem;
            border-radius: 0.625rem 0.000rem 0.625rem 0.000rem;

            img {
                width: 1.125rem;
                height: 1.125rem;
                margin-right: 0.625rem;
            }

            .numbes {
                margin-top: 0.313rem;
                font-size: 1.00rem;
                color: #3ADEFF;

                span {
                    font-size: 1.000rem;
                }
            }
        }

        .listItem:nth-child(3n) {
            margin-right: 0;
        }
    }
}
</style>
